<template>
  <view class="curriculum">
    <template v-if="loginFlag && isMember">
      <view v-for="item in bookList" :key="item.id" class="curriculum-list">
        <view class="title flex items-center justify-between">
          <view class="left flex items-center">
            <image class="left-img" :src="`https://app5.shuguostar.cn/imgs/images/curriculum/${Number(item.status) === 0 ? 'start' : Number(item.status) === 4 ? 'ing' : Number(item.status) === 6 ? 'finish' : 'abnormal'}.png`" />
            <text class="left-text">
              {{ getStatus(item.status) }}
            </text>
          </view>
          <view class="right">
            {{ `${item.startDate} 至 ${item.endDate}` }}
          </view>
        </view>

        <view class="content">
          <ReadItem :data="item" />
        </view>
      </view>
    </template>

    <template v-else>
      <image class="ip-img" src="https://app5.shuguostar.cn/imgs/images/home/IP.png" />
      <view class="no-data">
        {{ loginFlag ? '暂无阅读内容' : '暂未登录，请登录后查看' }}
      </view>
      <view class="no-btn" @click="handleClick">
        {{ loginFlag ? '联系老师看看我应该怎么读书' : '点击登录' }}
      </view>
    </template>

    <ContactTeacher v-model:show-overlay="showOverlay" />
  </view>
</template>

<script setup lang="ts">
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import ReadItem from '@/components/read-item/index.vue';
import ContactTeacher from '@/components/contact-teacher/index.vue';
import { getCourseList } from '@/api/read/index';
import type { ListParams } from '@/api/read/type';
import type { ReadingBookResult } from '@/api/home/type';
import { useUserStore } from '@/store';
import { isLogin } from '@/utils/auth';

const store = useUserStore();
const loginFlag = ref<boolean>(isLogin());
// 是否是会员
const isMember = computed(() => {
  return store.fromVip === 'y' || store.fromVip === 'Y';
});

const showOverlay = ref<boolean>(false);

const getStatus = (status: string | number) => {
  switch (Number(status)) {
    case 0:
      return '待上课';
    case 1:
      return '请假';
    case 2:
      return '旷课';
    case 3:
      return '未上课';
    case 4:
      return '读书中';
    case 5:
      return '未完成打卡';
    case 6:
      return '已完成';
    default:
      return '';
  }
};

const handleClick = () => {
  if (!loginFlag.value) {
    uni.navigateTo({
      url: '/pages/common/login/index',
    });
  }
  else if (!isMember.value) {
    showOverlay.value = true;
  }
};

const pageParams = ref<ListParams>({
  pageNums: 1,
  pageSize: 10,
});
const bookList = ref<Array<ReadingBookResult>>([]);
const total = ref<number>(0);
const getList = () => {
  return getCourseList(pageParams.value).then((res: { total: number; rows: Array<ReadingBookResult> }) => {
    total.value = res.total;
    bookList.value = res.rows;
  });
};

onShow(() => {
  if (loginFlag.value)
    getList();
});

onPullDownRefresh(() => {
  pageParams.value.pageNums = 1;
  getList().then(() => {
    uni.stopPullDownRefresh();
  });
});

onReachBottom(() => {
  if (bookList.value.length >= total.value)
    return;
  pageParams.value.pageNums++;
  getList();
});

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: '雨果读书',
    imageUrl: 'https://app5.shuguostar.cn/imgs/images/home/share.png',
  };
});
</script>

<style lang="scss" scoped>
.curriculum {
  width: 100%;
  min-height: 100%;

  .curriculum-list {
    padding: 40rpx 32rpx;

    .title {
      .left {
        .left-img {
          width: 36rpx;
          height: 36rpx;
        }

        .left-text {
          padding-left: 8rpx;
          font-size: 28rpx;
          line-height: 48rpx;
          color: #000;
        }
      }

      .right {
        font-size: 24rpx;
        color: #888;
      }
    }

    .content {
      padding-top: 24rpx;
    }
  }

  .ip-img {
    margin: 410rpx 286rpx 24rpx 286rpx;
    width: 176rpx;
    height: 252rpx;
  }

  .no-data {
    padding-bottom: 80rpx;
    font-size: 28rpx;
    text-align: center;
    line-height: 40rpx;
    text-align: center;
    color: #888;
  }

  .no-btn {
    margin: 0 40rpx;
    font-size: 32rpx;
    text-align: center;
    line-height: 92rpx;
    background: #4AAAF8;
    color: #fff;
    border-radius: 46rpx;
  }
}

:deep(.u-line-progress__line) {
  background: rgba(74, 170, 248, 0.6) !important;
}
</style>
